<template>
  <div>
    <el-drawer
      title="客户详情"
      size="80%"
      :visible.sync="clientUserDetailVis"
      :direction="direction"
    >
      <div class="app-container">
        <el-row>
          <el-col :span="12" class="card-box">
            <el-card>
              <div slot="header">
                <span><i class="el-icon-cpu"></i> 用户信息 </span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">属性</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">值</div>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">用户名</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">-</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">串号</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.imeiCode }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">手机号</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.phone }}</div>
                      </td>
                    </tr>

                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">创建时间</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.createdAt }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.balance }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">可提现金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">-</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次登录时间</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">-</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次登录IP</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">-</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">包名</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">-</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>

          <el-col :span="12" class="card-box">
            <el-card>
              <div slot="header">
                <span><i class="el-icon-sunny"></i> 充值信息 </span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">属性</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">值</div>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">总充值金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.totalRechargeAmount }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">首次充值时间</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.firstRechargeTime }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">首冲金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.firstRechargeAmount }}</div>
                      </td>
                    </tr>

                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次充值时间</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.lastRechargeTime }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次充值金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.lastRechargeAmount }}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" class="card-box">
            <el-card>
              <div slot="header">
                <span><i class="el-icon-money"></i> 提现信息 </span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%">
                  <thead>
                    <tr>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">属性</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">值</div>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">总计提现金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.totalWithdrawAmount }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次提现时间</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.lastWithdrawTime }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">上次提现金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.lastWithdrawAmount }}</div>
                      </td>
                    </tr>

                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">在途提现金额</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ this.userDetail.pendingWithdrawAmount }}</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" class="card-box">
            <el-card>
              <div slot="header">
                <span><i class="el-icon-money"></i> 资金流水明细 </span>
              </div>

              <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="68px"
              >
                <el-form-item label="流水类型" prop="type">
                  <el-select
                    v-model="queryParams.type"
                    placeholder="请选择流水类型"
                  >
                    <el-option
                      v-for="item in this.types"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    @change="handleDateRangeChange"
                    :default-timezone="'Asia/Kolkata'"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getList"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>

              <el-table v-loading="loading" :data="adminList">
                <el-table-column
                  label="流水ID"
                  width="170"
                  align="center"
                  prop="id"
                />
                <el-table-column
                  label="创建时间"
                  align="center"
                  prop="createdAt"
                />
                <el-table-column
                  label="金额"
                  align="center"
                  prop="amount"
                />
                <el-table-column
                  label="余额"
                  align="center"
                  prop="balance"
                />
                <el-table-column
                  label="流水类型"
                  align="center"
                  prop="type"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.type ==='recharge'">充值</span>
                    <span v-if="scope.row.type ==='withdraw'">提现</span>
                    <span v-if="scope.row.type ==='withdraw_fail'">提现失败返金币</span>
                    <span v-if="scope.row.type ==='betting'">游戏下注</span>
                    <span v-if="scope.row.type ==='reward'">游戏奖励</span>
                    <span v-if="scope.row.type ==='tax'">游戏税</span>
                  </template>
                </el-table-column>
         
              </el-table>

              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listCreditRecord } from "@/api/record/creditRecord";
import {handleDateRangeChange} from '@/utils/time.js'

export default {
  name: "userDetail",
  data() {
    return {
      types: [
        {
          label: "充值",
          value: "recharge",
        },
        {
          label: "提现",
          value: "withdraw",
        },
        {
          label: "提现失败返金币",
          value: "withdraw_fail",
        },
        {
          label: "游戏下注",
          value: "betting",
        },
        {
          label: "游戏奖励",
          value: "reward",
        },
        {
          label: "游戏税",
          value: "tax",
        }
      ],
      userDetail: {},
      clientUserDetailVis: false,
      direction: "ltr",
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId : undefined
      },
      // 遮罩层
      loading: false,
      adminList: [],
      total: 0,
    };
  },
  methods: {
    /** 查询管理账号信息列表 */
    getList() {
      this.loading = true;
      listCreditRecord(this.queryParams).then((response) => {
        this.adminList = response.data.data;
        this.total = response.data.total;
        this.loading = false;
        this.queryParams = {}
      });
    },
    handleDateRangeChange : handleDateRangeChange
  },
};
</script>

<style lang="scss" scoped>
</style>